<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>首页</title>
  <link rel="icon" href="../favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,LightYearAdmin,补贴,后台模板,后台管理系统,补贴HTML模板">
  <meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
  <meta name="author" content="yinqi">
  <link href="../css/bootstrap.min.css" rel="stylesheet">
  <link href="../css/materialdesignicons.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../js/bootstrap-table/bootstrap-table.min.css">

  <link rel="stylesheet" href="../js/jqTable/css/jqTable.css">
  <!-- 引入 bootstrap-table 样式 -->
  <link href="../css/style.min.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="../css/lyear_main.css">
</head>

<body>
  <div class="container-fluid p-t-15">

    <div class="row gutter-15">

      <div class="col-xl-5 mt-15">
        <div class="user_box b-radius-4">
          <div class="user_con">
            <div class="user_header_img">
              <img src="../images/users/yh.png" alt="">
            </div>
            <div class="user_info">
              <div class="user_status">
                登录信息
                <!-- <span>【{{normal}}】</span> -->
                <span>【正常】</span>
              </div>
              <div class="user_info_con c_91">
                <div>
                  <div>
                    <div>省管理 杨进 13734008601</div>
                    <div class="change-bind pointer">【更换绑定】</div>
                  </div>
                </div>
                <div>
                  <div>
                    登录总数：
                    <span>500</span>
                    次
                  </div>
                </div>
              </div>
            </div>
            <div class="year_subsidy">
              <div class="year_num">2023</div>
              <div class="year_tip c_91">当前补贴资金年度</div>
            </div>
          </div>
          <div class="login_record">
            <div>
              <div>本次登录IP</div>
              <span>171.117.182.11</span>
            </div>
            <span></span>
            <div>
              <div>本次登录时间</div>
              <span>2023/05/25 01:25:05</span>
            </div>
            <span></span>
            <div>
              <div>上次登录IP</div>
              <span>171.117.182.116</span>
            </div>
            <span></span>
            <div>
              <div>上次登录时间</div>
              <span>2023/05/25 14:05:06</span>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-7 statis-count mt-15">

        <div class="row gutter-15">

          <div class="col-md-4">
            <div class="card bg-white b-radius-4">
              <a href="##" class="card-body">
                <div href="##" class="d-flex align-items-center">
                  <div class="avatar-lg rounded-circle avatar-box">
                    <img src="../images/main/yfbxhs.png" alt="">
                  </div>
                  <div class="card-content">
                    <div class="fs-6 fw-bold text-nowrap">已封闭型号数</div>
                    <div class="fs-3 fw-bold c-ED9B35">99</div>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card bg-white b-radius-4">
              <a href="##" class="card-body">
                <div href="##" class="d-flex align-items-center">
                  <div class="avatar-lg rounded-circle avatar-box">
                    <img src="../images/main/btblyjsqs.png" alt="">
                  </div>
                  <div class="card-content">
                    <div class="fs-6 fw-bold text-nowrap">补贴比例预警申请数</div>
                    <div class="fs-3 fw-bold c-F93C4C">13</div>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card bg-white b-radius-4">
              <a href="##" class="card-body">
                <div href="##" class="d-flex align-items-center">
                  <div class="avatar-lg rounded-circle avatar-box">
                    <img src="../images/main/wslsqs.png" alt="">
                  </div>
                  <div class="card-content">
                    <div class="fs-6 fw-bold text-nowrap">APP端提交未受理申请数</div>
                    <div class="fs-3 fw-bold c-2076FD">13</div>
                  </div>
                </div>
              </a>
            </div>
          </div>

        </div>

        <div class="row gutter-15">

          <div class="col-md-4">
            <div class="card bg-white b-radius-4">
              <a href="##" class="card-body">
                <div href="##" class="d-flex align-items-center">
                  <div class="avatar-lg rounded-circle avatar-box">
                    <img src="../images/main/wdxw.png" alt="">
                  </div>
                  <div class="card-content">
                    <div class="fs-6 fw-bold text-nowrap">未读新闻</div>
                    <div class="fs-3 fw-bold c-0CA9DB">56</div>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card bg-white b-radius-4">
              <a href="##" class="card-body">
                <div href="##" class="d-flex align-items-center">
                  <div class="avatar-lg rounded-circle avatar-box">
                    <img src="../images/main/wdxx.png" alt="">
                  </div>
                  <div class="card-content">
                    <div class="fs-6 fw-bold text-nowrap">未读消息</div>
                    <div class="fs-3 fw-bold c-31CAC7">99</div>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="col-md-4">
            <div class="card bg-white b-radius-4">
              <a href="##" class="card-body">
                <div class="d-flex align-items-center">
                  <div class="avatar-lg rounded-circle avatar-box">
                    <img src="../images/main/lstx.png" alt="">
                  </div>
                  <div class="card-content">
                    <div class="fs-6 fw-bold text-nowrap">历史提醒</div>
                    <div class="fs-3 fw-bold c-5ABE66">30</div>
                  </div>
                </div>
              </a>
            </div>
          </div>

        </div>

      </div>

    </div>

    <div class="row gutter-15 chart-box">

      <div class="col-xl-5 mt-15">
        <div class="card b-radius-4">
          <div class="card-header">
            <div class="min_title">
              <div class="title_label">当前资金年度各状态申请数</div>
            </div>
          </div>
          <div class="card-body">
            <div class="js-echartjs-pie" id="js-echartjs-pie"></div>
          </div>
        </div>
      </div>

      <div class="col-xl-7 mt-15">
        <div class="card b-radius-4">
          <div class="card-header">
            <div class="min_title">
              <div class="title_label">当前资金年度各辖区资金数</div>
              <div class="title_more capital-btn">
                <div class="btn-group">
                  <button data-value="0" class="select-btn btn btn-default btn-success"
                    onclick="selectFun(0)">选择一</button>
                  <button data-value="1" class="select-btn btn btn-default" onclick="selectFun(1)">选择二</button>
                  <button data-value="2" class="select-btn btn btn-default" onclick="selectFun(2)">选择三</button>
                </div>

              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="js-echartjs-bar" id="js-echartjs-bar"></div>
          </div>
        </div>
      </div>

    </div>

    <div class="row gutter-15 table-box">

      <div class="col-xl-5">
        <div class="card b-radius-4">
          <header class="card-header">
            <div class="min_title">
              <div class="title_label">补贴比例预警</div>
              <div class="title_more c_91 pointer">更多 >></div>
            </div>
          </header>
          <div class="card-body">
            <div class="c-table">
              <table cellspacing="0" cellpadding="0" border="0" role="c-table">
                <colgroup>
                  <col name="" width="50">
                  <col name="" width="150">
                  <col name="" width="80">
                  <col name="" width="240">
                </colgroup>
                <thead>
                  <tr>
                    <th class="">
                      <div class="cell">序号</div>
                    </th>
                    <th class="">
                      <div class="cell">申请表编号</div>
                    </th>
                    <th class="">
                      <div class="cell">序号</div>
                    </th>
                    <th class="">
                      <div class="cell">单机中央补贴/销售单价比例</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="">
                      <div class="cell">1</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-success" style="width: 30%;">
                            </div>
                          </div>
                          <div class="text-end text-success" style="width: 45px;">30%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">2</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-info" style="width: 60%;">
                            </div>
                          </div>
                          <div class="text-end text-info" style="width: 45px;">60%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">3</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-warning" style="width: 80%;">
                            </div>
                          </div>
                          <div class="text-end text-warning" style="width: 45px;">80%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">4</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-danger" style="width: 90%;">
                            </div>
                          </div>
                          <div class="text-end text-danger" style="width: 45px;">90%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">5</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-danger" style="width: 90%;">
                            </div>
                          </div>
                          <div class="text-end text-danger" style="width: 45px;">90%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <!-- <tr>
                    <td class="">
                      <div class="cell">6</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-danger" style="width: 90%;">
                            </div>
                          </div>
                          <div class="text-end text-danger" style="width: 45px;">90%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">7</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-danger" style="width: 90%;">
                            </div>
                          </div>
                          <div class="text-end text-danger" style="width: 45px;">90%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">8</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-danger" style="width: 90%;">
                            </div>
                          </div>
                          <div class="text-end text-danger" style="width: 45px;">90%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">9</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-danger" style="width: 90%;">
                            </div>
                          </div>
                          <div class="text-end text-danger" style="width: 45px;">90%</div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">10</div>
                    </td>
                    <td class="">
                      <div class="cell">1809010122000003</div>
                    </td>
                    <td class="">
                      <div class="cell">段领</div>
                    </td>
                    <td class="">
                      <div class="cell">
                        <div class="flex-box align-items-center">
                          <div class="progress progress-lg progress-circle" style="flex: 1;">
                            <div class="progress-bar bg-danger" style="width: 90%;">
                            </div>
                          </div>
                          <div class="text-end text-danger" style="width: 45px;">90%</div>
                        </div>
                      </div>
                    </td>
                  </tr> -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-7">
        <div class="card b-radius-4">
          <header class="card-header">
            <div class="min_title">
              <div class="title_label">企业确认销售单价情况</div>
              <div class="title_more c_91 pointer">更多 >></div>
            </div>
          </header>
          <div class="card-body">
            <div class="c-table">
              <table cellspacing="0" cellpadding="0" border="0" role="c-table">
                <colgroup>
                  <col name="" width="">
                  <col name="" width="">
                  <col name="" width="">
                  <col name="" width="">
                  <col name="" width="">
                  <col name="" width="">
                </colgroup>
                <thead>
                  <tr>
                    <th class="">
                      <div class="cell">生产企业</div>
                    </th>
                    <th class="">
                      <div class="cell">机具型号</div>
                    </th>
                    <th class="">
                      <div class="cell">未确认申请数</div>
                    </th>
                    <th class="">
                      <div class="cell">偏低申请数</div>
                    </th>
                    <th class="">
                      <div class="cell">偏高申请数</div>
                    </th>
                    <th class="">
                      <div class="cell">超时确认申请数</div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <!-- <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="">
                      <div class="cell">测试生产企业</div>
                    </td>
                    <td class="">
                      <div class="cell">H301</div>
                    </td>
                    <td class="">
                      <div class="cell">80</div>
                    </td>
                    <td class="">
                      <div class="cell">90</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                    <td class="">
                      <div class="cell">300</div>
                    </td>
                  </tr> -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>

  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/popper.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <!-- 引入 bootstrap-table 插件 -->
  <script src="../js/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
  <!-- 引入 echarts 插件 js -->
  <script type="text/javascript" src="../js/echarts.min.js"></script>

  <!-- 必要插件：固定列滚动需要用到，鼠标滚动兼容多浏览器 -->
  <script src="../js/jqTable/js/jquery.mousewheel.min.js"></script>
  <!-- 总引入  -->
  <script src="../js/jqTable/js/zipJs/jqTable.all.min.js"></script>
  <script type="text/javascript" src="../js/main.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function (e) {
      var $dashChartPieCnt = jQuery('#js-echartjs-pie')[0],
        $dashChartBarCnt = jQuery('#js-echartjs-bar')[0];

      let data = {
        leabels: ['资金申请表待生成', '申请结算资料待生成', '作废', '资料待审核', '待结算', '机具核验'],
        data: [
          { value: 726, name: '资金申请表待生成' },
          { value: 603, name: '申请结算资料待生成' },
          { value: 210, name: '作废' },
          { value: 212, name: '资料待审核' },
          { value: 102, name: '待结算' },
          { value: 310, name: '机具核验' },
        ]
      }
      initPieEcharts(data, $dashChartPieCnt)

      let data1 = {
        xData: ['宝泉县管理局', '红兴隆管理局', '建三江管理局', '牡丹江管理局', '北安管理局', '九三管理局', '齐齐哈尔管理局'],
        data1: [444, 500, 300, 333, 888, 456, 889],
        data2: [600, 555, 666, 200, 100, 300, 600]
      }
      initBarEcharts(data1, $dashChartBarCnt)
    });

    // init饼图
    function initPieEcharts(data, dom) {
      let chart = echarts.init(dom)
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          right: 'right',
          top: 'center',
          data: data.leabels
        },
        series: [
          {
            type: 'pie',
            radius: '85%',
            center: ['30%', '50%'],
            data: data.data,
            label: {
              show: false
            },
            color: [
              '#5789E8',
              '#EFBC51',
              '#5EA55F',
              '#D44E45',
              '#E8733D',
              '#6EBBC3'
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && chart.setOption(option)
      window.addEventListener('resize', function () { chart.resize() })
    }

    // 切换选择
    function selectFun(n) {
      let domA = $('.select-btn')
      for (let i = 0; i < domA.length; i++) {
        let item = domA[i]
        if (n == item.dataset.value) {
          item.classList.add('btn-success')
        } else {
          item.classList.remove('btn-success')
        }
      }
    }
    // init 柱形图
    function initBarEcharts(data, dom) {
      let chart = echarts.init(dom)
      let option = {
        title: {
          subtext: '金额（万元）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        //最上面参数
        legend: {
          data: [
            '中央分配资金',
            '中央使用资金'
          ]
        },
        // dataZoom: [
        //   {
        //     type: 'slider',
        //     show: true,
        //     xAxisIndex: [0],
        //     start: 1,
        //     end: 35
        //   }
        // ],
        grid: {
          top: '16%',
          left: '3%',
          right: '1%',
          // bottom: '18%',
          bottom: '0',
          containLabel: true
        },
        //横轴月份
        xAxis: [
          {
            type: 'category',
            data: data.xData,
            axisPointer: {
              type: 'shadow'
            },
            canvas: {}
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额 (万元)',
            name: '',
            splitLine: { show: false },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        //表示数据的柱状数据
        series: [
          {
            name: '中央分配资金',
            type: 'bar',
            data: data.data1,
            itemStyle: {
              color: '#E8A24D'
            }
          },
          {
            name: '中央使用资金',
            type: 'bar',
            data: data.data2,
            itemStyle: {
              color: '#1A8FA0'
            }
          }
        ]
      }

      option && chart.setOption(option)
      window.addEventListener('resize', function () { chart.resize() })
    }

  </script>
</body>

</html>